/**
 * 大g账号密码登录框组件
 */

import { LockOutlined, UserOutlined } from "@ant-design/icons"
import { Button, Form, Input } from "antd"
import React, { useState } from "react"

import { sendToBackground, type PlasmoMessaging } from "@plasmohq/messaging"

const PasswordLogin: React.FC = () => {
  // 登录按钮加载状态
  const [loading, setLoading] = useState(false)
  // 登录提交方法
  const onFinish = async (values: any) => {
    setLoading(true)
    const req = {
      // 请求loginService服务
      name: "loginService",
      body: {
        ...values,
        type: 2
      }
    } as PlasmoMessaging.Request<never, { loginTmpCode: string; type: number }>
    // 发送消息到background
    await sendToBackground(req)
    setLoading(false)
  }
  return (
    <div className={"password-login-wrap"}>
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{ username: "", password: "" }}
        onFinish={onFinish}>
        <Form.Item
          name="username"
          rules={[{ required: true, message: "请输入用户名" }]}>
          <Input
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder="用户名"
          />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: "请输入登录密码" }]}>
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="密码"
          />
        </Form.Item>

        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            block={true}
            loading={loading}
            className="login-form-button">
            登录
          </Button>
          <div></div>
        </Form.Item>
      </Form>
    </div>
  )
}

export default PasswordLogin
